<template>
	<button @click="exit">退出</button>
	<el-row>
		<el-col :span="8">
			<!-- <router-link to="/index">首页</router-link>
			<router-link to="/user">用户页</router-link> -->
			
			<el-menu>
				<el-menu-item>
					<router-link to="/index">首页</router-link>
				</el-menu-item>
				<template  v-for="first in menulist">
					<el-sub-menu v-if="first.childs.length!=0" :index="first.menuId">
						<template #title>
							<router-link :to="first.menuPath">{{first.menuName}}</router-link>
						</template>
						<el-menu-item v-for="second in first.childs" :index="second.menuId">
							<router-link :to="second.menuPath">{{second.menuName}}</router-link>
						</el-menu-item>
					</el-sub-menu>
					<el-menu-item v-else :index="first.menuId">
						<router-link :to="first.menuPath">{{first.menuName}}</router-link>
					</el-menu-item>
				</template>
				
				
			</el-menu>
		</el-col>
		<el-col :span="16">
			<router-view></router-view>
		</el-col>
	</el-row>
</template>
<script setup>
	import { allMenu } from '@/api';
	import { useRouter } from 'vue-router';
	import {ref} from "vue"
	const router=useRouter()
	let menulist=ref([])
	const getAllMenu= async ()=>{
		let res=await allMenu({roleId:sessionStorage.getItem("roleId")})
		console.log('菜单',res)
		menulist.value=res
	}
	getAllMenu()
	
	const exit=()=>{
		router.push("/login");
		sessionStorage.clear()
	}
	
</script>
<style scoped>
	.el-menu a{
		display: block;
		width: 100%;
	}
	.el-menu a.router-link-active{
		background: red;
		color: azure;
	}
	
	:deep(.is-active .el-sub-menu__title){
		background: red;
		color: azure;
	}
	
	.el-menu-item:hover {
		background-color:transparent;
	}
	
</style>